<template>
	<!-- pages/index/index.wxml -->
	<view class="warp">

		<view class="custom-navbar">
			<text class="title">鲨鱼记账</text>
			<view class="time_warp">
				<view>
					<text>{{year}}年</text>
				</view>
				<view>
					收入
				</view>
				<view>
					支出
				</view>
			</view>
			<view class="time_value">
				<view class="time_select">
					<picker mode="date" fields="month" @change='timeChange'>
						<view class="triangle">
							<text>{{monthN}}</text>月
						</view>
					</picker>
				</view>
				<view>
					0.00
				</view>
				<view>
					0.00
				</view>
			</view>

		</view>
		<view class="content">
			<view v-for="(item,index) in dataList" :key="index">
				<view class="content_aggregate">
					<view class="content_date">
						<text>{{item.dateData}}</text>
						<text>{{item.week}}</text>
					</view>
					<view class="content_aggregate_money">
						收入<text>
							{{item.income}}
						</text>
						支出：<text>{{item.amountPaid}}</text>
					</view>
				</view>
				<view v-for="(item1,index1) in item.List" :key="index1" class="massageList" @click="lookview(item1)">
					<image :src="item1.imgUrl" mode=""></image>
					<view class="massage">
						<view>
							{{item1.text}}
						</view>
						<view>
							{{item1.money}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<Tabbar :page="page" @addCheck='isAddCheck=true'></Tabbar>

		<addList v-if="isAddCheck" @Cancel="isAddCheck=false"></addList>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAddCheck:false,
				page: '/pages/tabbar/tabbar-1/tabbar-1',

				multiIndex: [0, 0],
				title: 'Hello',
				year: new Date().getFullYear(),
				monthN: new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 > 10 : '0' + String(new Date()
					.getMonth() + 1),
				dataList: [{
						dateData: "01月14日",
						week: "星期二",
						amountPaid: '888',
						income: '999',
						List: [{
							imgUrl: "/static/img/tabbar/me.png",
							text: '兼职',
							money: '66.00'
						}, {
							imgUrl: "/static/img/tabbar/me.png",
							text: '打工',
							money: '5.00'
						}]
					},
					{
						dateData: "01月14日",
						week: "星期二",
						amountPaid: '888',
						income: '999',
						List: [{
							imgUrl: "/static/img/tabbar/me.png",
							text: '兼职',
							money: '66.00'
						}, {
							imgUrl: "/static/img/tabbar/me.png",
							text: '打工',
							money: '5.00'
						}, {
							imgUrl: "/static/img/tabbar/me.png",
							text: '诈骗',
							money: '33.00'
						}, {
							imgUrl: "/static/img/tabbar/me.png",
							text: '抢劫',
							money: '8.00'
						}]
					}
				]
			};
		},
		onShow() {},
		onLoad() {
			console.log(5555)
		},
		methods: {
			timeChange(e) {
				let that = this
				const multiIndex = e.detail.value;
				this.year = multiIndex.split("-")[0]
				this.monthN = multiIndex.split("-")[1]

			},
			lookview(item) {
				console.log('22222222222222222')
				uni.navigateTo({
					url: '/pages/tabbar/tabbar-1/datail'
				});
			}

		}
	};
</script>

<style>
	.content {}

	.content_aggregate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		padding: 0 16px;
		color: #999;
		border-bottom: 0.5px solid #ccc;
		height: 30px;
	}

	.massageList>.massage {
		border-bottom: 0.5px solid #ccc;
		height: 40px;
		line-height: 40px;
		padding: 12px 0;
	}

	.massageList>.massage:last-child {
		border: none;
	}

	.massageList {
		display: flex;
		padding: 0px 16px;
		justify-content: space-between;
		align-items: center;
		/* margin-top: 12px; */
	}

	.massageList>view:last-child {
		flex: 1;
		display: flex;
		justify-content: space-between;
	}

	.massageList>image {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30px;
	}

	.content_date>text:first-child {

		margin-right: 8px;

	}

	.content_aggregate_money>text:first-child {
		margin-right: 25px;
	}

	.warp {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	/* pages/index/index.wxss */
	.custom-navbar {

		/* 确保头部在内容之上 */
		background-color: yellow;
		display: flex;
		flex-direction: column;
		/* height: 200px; */
	}

	.status-bar {
		width: 100%;
		background-color: #f0f0f0;
		/* 状态栏颜色，根据实际情况调整 */
	}



	.title {
		/* 标题样式 */
		font-size: 24px;
		color: #000;
		margin-top: 23px;
		text-align: center;
	}

	.time_value {
		display: flex;
		padding: 0px 16px;

	}

	.time_select text {
		font-size: 24px;
	}

	.time_value>view {
		flex: 1;
	}

	.time_value>view::first-letter {
		font-size: 24px;
	}

	.time_select .triangle::after {
		display: inline-block;
		content: ' ';
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 10px solid black;
		margin-left: 5px;
	}

	.time_warp {
		display: flex;
		font-size: 12px;
		color: #777;
		justify-content: space-between;
		padding: 12px 16px;
	}

	.time_warp>view {
		flex: 1;
	}

	.page-content {
		padding-top: 60px;
		/* 根据头部高度调整 */
	}
</style>